<template>
	<view class="con">
    <!-- 个人总收益(元) -->
    <view class="top">
      <view class="top1">{{moneyinInfo.will_left_val0 || 0}}</view>
      <view class="top2">个人总收益(元)</view>
    </view>
    <view class="tab flex flex_between">
      <!-- 实战、补贴 -->
      <view class="tabz flex">
        <view class="tabz_li" :class="type===50?'active':''" @click="tabChange(50)">实战</view>
        <view class="tabz_li" :class="type===60?'active':''" @click="tabChange(60)">补贴</view>
      </view>
      <view class="tab2 flex">
        <picker mode="date" fields="month" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
        	<view class="uni-input">{{date}}</view>
        </picker>
        <image class="dataimg" mode="widthFix" src="/static/mine/img22.png"></image>
      </view>
    </view>
    <!-- 列表 -->
    <view class="liebia">
      <view class="liebiaT flex" v-if="type===50&&hasdata">
        <view class="liebiaT_li">团员</view>
        <view class="liebiaT_li">教程</view>
        <view class="liebiaT_li">模式</view>
        <view class="liebiaT_li">日期</view>
        <view class="liebiaT_li2">收益</view>
      </view>
      <view class="liebiaT flex" v-if="type===60&&hasdata">
        <view class="liebiaT_li" style="width: 28%;">团员</view>
        <view class="liebiaT_li" style="width: 28%;">教程</view>
        <view class="liebiaT_li" style="width: 28%;">日期</view>
        <view class="liebiaT_li" style="width: 16%;">收益</view>
      </view>
      <view class="list" v-if="type===50">
        <view class="list_li flex" v-for="(item,index) in moneyinInfoList">
          <view class="list_li_1">{{item.ordernum}}</view>
          <view class="list_li_1 teshudea">{{item.bz}}</view>
          <view class="list_li_1">{{item.model}}</view>
          <view class="list_li_1">{{item.time}}</view>
          <view class="list_li_2">+{{item.money}}</view>
        </view>
      </view>
      <view class="list" v-if="type===60">
        <view class="list_li flex" v-for="(item,index) in moneyinInfoList">
         <view class="list_li_1" style="width: 28%;">{{item.ordernum}}</view>
         <view class="list_li_1 teshudea" style="width: 28%;">{{item.bz}}</view>
         <view class="list_li_1" style="width: 28%;">{{item.time}}</view>
         <view class="list_li_2" style="width: 16%;">+{{item.money}}</view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
 import {
   getUserMoneyinlist //数据
 } from '@/request/api.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
        // openid:'oycWz5SBi1rMTuqdQhLy4iSvgHjU', //获取缓存的openid
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        type: 50, //10快递、20补贴、30运营、40跨境、200好物、50课程、60新补贴
        date: currentDate,
        moneyinInfo:{}, //收益数据
        moneyinInfoList:[],//收益列表
        hasdata:false,
        page:1,//页码
        total:0,//总共的数量
        pagesizes:15//每页数量
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {

		},
		onShow() {
     this.page = 1
     this.type = 50
     this.moneyinInfoList = []
     this.getUserMoneyinlistFun()
		},
    onReachBottom() {
     let totolPage =Math.ceil(this.total / this.pagesizes)
     console.log('总共多少页')
     console.log(totolPage)
     if(this.page<=totolPage){
       this.loadMore(); // 当上拉时加载更多数据
     }
    },
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			},
			bindDateChange: function(e) {
        console.log('切换日期')
        console.log(e.detail.value)
        this.moneyinInfoList = []
        this.page = 1
        this.date = e.detail.value
        this.getUserMoneyinlistFun()
			},
      // 获取我的收益
      getUserMoneyinlistFun(){
        let param = {
          openid: this.openid,
          page:this.page,
          type: this.type,
          date: this.date
        }
        this.moneyinInfo = {}
        console.log('type是多少')
        console.log(this.type)
        if(this.type!==40){
          getUserMoneyinlist(param).then(res=>{
            if(res.error_code===0){
              this.moneyinInfo = res.data
              this.total = Number(res.data.total);
              this.pagesizes = Number(res.data.pagesizes);
              let listRe = res.data.arrList
              if(listRe.length>0){
                this.moneyinInfoList = this.moneyinInfoList.concat(listRe);
              }
              if(this.moneyinInfoList.length>0){
                this.hasdata = true
              }else{
                this.hasdata = false
              }
            }else{
              uni.showToast({
                icon: 'none',
                title: res.msg
              })
            }
          })
        }
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.getUserMoneyinlistFun()
      },
      tabChange(type) {
        console.log('切换最上面tab---')
        this.moneyinInfoList = []
        this.page = 1
      	this.type = type
        this.getUserMoneyinlistFun()
      },

		}
	}
</script>

<style scoped lang="scss">
	.con {
    padding: 30rpx;
    .top{
      width: 100%;
      height: auto;
      margin-bottom: 52rpx;
      padding-left: 50rpx;
      box-sizing: border-box;
      .top1{
        color: rgba(16,16,16,1);
        font-size: 70rpx;
      }
      .top2{
        color: rgba(16,16,16,1);
        font-size: 24rpx;
      }
    }
		.dataimg {
			width: 28rpx;
			height: auto;
			margin-left: 10rpx;
		}
    .tabz{
      width: 400rpx;
      height: auto;
      background-color: rgba(211,211,211,1);
      border-radius: 20rpx;
      height: 68rpx;
      line-height: 68rpx;
      color: rgba(16,16,16,1);
      font-size: 28rpx;
      overflow: hidden;
      .tabz_li{
        width: 50%;
        text-align: center;
      }
      .tabz_li.active{
        background-color: rgba(0,0,0,1);
        color: #fff;
      }
    }
	}
  .uni-input{
    color: rgba(16,16,16,1);
    font-size: 28rpx;
  }
  .liebia{
    width: 100%;
    height: auto;
    .liebiaT{
      margin-top: 60rpx;
      height: auto;
      margin-bottom: 20rpx;
      .liebiaT_li{
        width: 21%;
        text-align: center;
        color: rgba(137,137,137,1);
        font-size: 24rpx;
      }
      .liebiaT_li2{
        color: rgba(137,137,137,1);
        font-size: 24rpx;
        text-align: center;
        width: 16%;
      }
    }
    .list{
      width: 100%;
      height: auto;
      .list_li{
        width: 100%;
        height: 88rpx;
        border-radius: 20rpx;
        background-color: rgba(255,255,255,1);
        line-height: 88rpx;
        margin-bottom: 20rpx;
        .list_li_1{
          width: 21%;
          color: rgba(16,16,16,1);
          font-size: 24rpx;
          text-align: center;
        }
        
        .list_li_2{
          border-radius: 0px 10px 10px 0px;
          background-color: rgba(211,211,211,1);
          width: 16%;
          color: rgba(16,16,16,1);
          font-size: 24rpx;
          text-align: center;
        }
      }
    }
  }
  .list_li_1{
    line-height: 31rpx;
    height: 66rpx;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>